<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="replay">Replay</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "AddAnimatedMarker.component",
    components: {Maptalks},
    setup() {

        const animate = () => {
            bars[0].animate(
                {
                    "symbol": {
                        "markerHeight": 82
                    }
                },
                {
                    "duration": 1000
                }
            );
            bars[1].animate(
                {
                    "symbol": {
                        "markerHeight": 197
                    }
                },
                {
                    "duration": 1000
                }
            );
            bars[2].animate(
                {
                    "symbol": {
                        "markerHeight": 154
                    }
                },
                {
                    "duration": 1000
                }
            );
        }
        const reset = () => {
            bars[0].updateSymbol({
                "markerHeight": 33
            });
            bars[1].updateSymbol({
                "markerHeight": 47
            });
            bars[2].updateSymbol({
                "markerHeight": 79
            });
        }

        let bars = ref(null)
        const getBars = (center) => {

            let bar1 = new maptalks.Marker(
                center.add(-0.012, -0.002),
                {
                    "symbol": {
                        "markerType": "bar",
                        "markerWidth": 48,
                        "markerHeight": 33,
                        "markerFill": "rgb(135,196,240)",
                        "markerLineWidth": 2,
                        "markerLineColor": "#fff"
                    }
                }
            );

            let bar2 = new maptalks.Marker(
                center.add(-0.004, -0.002),
                {
                    "symbol": {
                        "markerType": "bar",
                        "markerWidth": 48,
                        "markerHeight": 47,
                        "markerFill": "rgb(216,115,149)",
                        "markerLineWidth": 2,
                        "markerLineColor": "#fff"
                    }
                }
            );

            let bar3 = new maptalks.Marker(
                center.add(0.004, -0.002),
                {
                    "symbol": {
                        "markerType": "bar",
                        "markerWidth": 48,
                        "markerHeight": 79,
                        "markerFill": "#1bbc9b",
                        "markerLineWidth": 2,
                        "markerLineColor": "#fff"
                    }
                }
            );

            return [bar1, bar2, bar3];
        }

        const replay = () => {
            reset();
            animate();
        }

        let mapOnLoadCB = (map) => {
            let center = map.getCenter();
            bars.value = getBars(center);
            new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_ANIMATION_LAYER).addGeometry(bars.value).addTo(map);

            replay();
        };

        return {
            mapOnLoadCB,
            replay
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
